<template>
	<view class="container">
		<view class="header">
			<image src="/static/img/bg.png" mode="scaleToFill"></image>
			<view class="sign-in-info">
				<view class="left">
					<view class="d-flex align-items-baseline" @tap="flow">
						<image class="integral-icon" src="/static/img/integral.png" style="display: inline-block;"></image>
						<view class="number" style="display: inline-block;">{{ totalPoint }}</view>
						<view class="font-size-base" style="display: inline-block;">积分</view>
						<view class="iconfont iconarrow-right line-height-100" style="display: inline-block;"></view>
					</view>
				</view>
				<view class="right">
					签到规则
				</view>
			</view>
		</view>
		<view style="padding: 0 30rpx;">
			<view class="sign-in-box">
				<view class="text-color-base font-weight-bold font-size-lg" style="margin: 20rpx 0;">连续签到赚积分</view>
				<zx-steps :active="activeDay" :options="stepsOption"></zx-steps>
				<view class="d-flex flex-column align-items-center just-content-center" style="margin: 20rpx 0;">
					<button type="primary" class="sign-in-btn" @tap="attendance" v-if="isSigned==false">签到</button>
					<button type="primary" class="sign-in-btn" disabled="true" v-else>已签到</button>
					<view class="font-size-base text-color-primary" style="margin-top: 20rpx;text-align: center;" @tap="toShowSignDate">查看签到日历</view>
				</view>
			</view>

			<view class="banner">
				<image src="https://images.qmai.cn/s23107/2020/04/30/aed6cdb1db4712f87e.png" mode="widthFix"></image>
			</view>
		</view>
		<zx-modal custom :show="attendanceModalVisible">
			<view class="attendance-modal">
				<view class="modal-header">
					<image src="/static/img/cup.png" mode="widthFix"></image>
				</view>
				<view class="modal-content d-flex align-items-center just-content-center flex-column font-size-sm text-color-base"
				 style="text-align: center;padding-top: 50rpx;">
					<view>赠送的{{tipMsg}}积分已发到您的账户中</view>
					<view>连续签到7天可获得{{sevenDaySend}}积分</view>
				</view>
				<view class="d-flex align-items-center just-content-center" style="margin-top: -20rpx;">
					<button type="primary" class="btn" @tap="attendanceModalVisible=false">我知道了</button>
				</view>
			</view>
		</zx-modal>
	</view>
</template>

<script>
	import zxSteps from '@/components/zx-ui/zx-steps/zx-steps.vue'
	import zxModal from '@/components/zx-ui/zx-modal/zx-modal'
	import { formatTimeNowYMD,formatTimePreDayYMD } from '@/common/util/util.js'
	import { getData,getDataOne,addPointData } from '@/common/api/point.js'
	import {
	    mapState
	} from 'vuex'; 
	export default {
		components: {
			zxSteps,
			zxModal
		},
		data() {
			return {
				customPoints: {},
				stepsOption: [],
				activeDay: 0,
				pointsMall: [],
				attendanceModalVisible: false,
				onePoint:0,  //一个积分抵现多少
				sevenDaySend:0, //签到满7天赠送多少积分
				signInSend:0, //每次签到赠送多少积分
				toMoney:'关闭',// 积分抵现
				totalPoint:0,
				dayNum:0,
				tipMsg:0,
				isSigned:true
				
			}
		},
		computed: {
			...mapState(['hasLogin','userId'])
		},
		async onLoad() {
			this.initData()
		},
		methods: {
			async initData(){
				const data = await getData({})
				this.onePoint = data[0].data.onePoint
				this.sevenDaySend = data[0].data.sevenDaySend
				this.signInSend = data[0].data.signInSend
				this.toMoney = data[0].data.toMoney
				const req = {
					userId: this.userId,
				}
				//获取用户积分信息
				const res = await getDataOne(req)
				if(res.length>0){
					this.totalPoint = res[0].point
					//说明前一天有签到
					if(formatTimePreDayYMD()==res[0].date){
						this.dayNum = res[0].dayNum
					}
					//判断当天是否有签到
					if(res[0].date==formatTimeNowYMD(new Date())){
						this.isSigned = true
					}else{
						this.isSigned = false
					}
				}else{
					this.isSigned = false
				}
				let stepsOptions = []
				for(var i=1;i<8;i++){
					if(i==this.dayNum){
						this.activeDay = this.dayNum
					}
					if(i==7){
						let arr = {
							title: i + '天',
							desc: '+'+this.sevenDaySend
						}
						arr.circle = '/static/img/goal.png'
						arr.circleStyle = 'width: 47rpx; height: 39rpx;'
						stepsOptions.push(arr)
					}else{
						let arr = {
							title: i + '天',
							desc: '+'+this.signInSend
						}
						stepsOptions.push(arr)
					}
				}
				this.stepsOption = stepsOptions
			},
			
			flow() {
				uni.navigateTo({
					url: '/pages/integrals/flow'
				})
			},
			detail(cate, id) {
				uni.navigateTo({
					url: '/pages/integrals/detail?cate=' + cate + '&id=' + id
				})
			},
			async attendance() {
				let point = this.signInSend
				if(this.dayNum==6){
					point = this.sevenDaySend
				}
				this.totalPoint = parseInt(this.totalPoint)+parseInt(point)
				const req = {
					userId: this.userId,
					date: formatTimeNowYMD(new Date()),
					mode: 0,  //0签到获取积分 
					point: parseInt(point),
					totalPoint: this.totalPoint,
					dayNum: this.dayNum+1,
					state: 0,
					updatetime: new Date().getTime()
				}
				const res = await addPointData(req)
				this.isSigned = true
				if(this.dayNum==7){
					this.tipMsg = this.sevenDaySend
				}else{
					this.tipMsg = this.signInSend
				}
				console.log(res)
				this.attendanceModalVisible = true
			},
			toShowSignDate(){
				uni.navigateTo({
					url: '/pages/point/signin-detail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		position: relative;
		width: 100%;
		height: 31.333vh;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.sign-in-info {
		position: absolute;
		width: 100%;
		height: 25.333vh;
		display: flex;
		align-items: center;
		top: 0;
		left: 0;

		.left {
			color: #FFFFFF;
			margin-left: 40rpx;
			flex: 1;
			display: flex;

			.integral-icon {
				width: 64rpx;
				height: 64rpx;
				margin-right: 20rpx;
			}

			.number {
				font-size: 80rpx;
				margin-right: 10rpx;
			}
		}

		.right {
			background-color: #FFFFFF;
			color: #ADB838;
			font-size: 28rpx;
			border-radius: 50rem 0 0 50rem;
			padding: 10rpx 30rpx;
		}
	}

	.sign-in-box {
		position: relative;
		background-color: #FFFFFF;
		margin-top: -90rpx;
		margin-bottom: 30rpx;
		// width: 100%;
		border-radius: 8rpx;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
		padding: 20rpx;
		display: flex;
		flex-direction: column;

		.sign-in-btn {
			width: 50%;
			border-radius: 50rem !important;
		}
	}

	.banner {
		width: 100%;
		margin: 30rpx 0;
		border-radius: 8rpx;

		image {
			width: 100%;
		}
	}

	.point-box {
		width: 49%;
		margin-bottom: 30rpx;
		border-radius: 8rpx;
		padding: 20rpx;
	}

	.text-color-primary {
		color: #ADB838;
	}

	.font-size-base {
		font-size: 15px;
	}

	uni-button[type='primary'] {
		background-color: #ADB838;
		color: #ffffff;
		font-size: 15px;
	}

	.attendance-modal {
		.modal-header {
			width: 100%;
			margin-top: -180rpx;
			position: relative;

			image {
				width: 100%;
			}
		}

		.modal-content {
			height: 200rpx;
		}

		.btn {
			width: 100%;
			border-radius: 50rem;
			font-size: 32rpx;
		}
	}

	.text-color-base {
		color: #5A5B5C;
	}

	.font-size-sm {
		font-size: 13px;
	}

	.text-color-base {
		color: #5A5B5C;
	}

	.font-size-lg {
		font-size: 17px;
	}
</style>
